@charset "utf-8";
.web section {
    width: 100%;
    padding-bottom:104px;
    box-sizing:border-box;
    background: -webkit-linear-gradient(top,#04060e,#363e4e);
    background: -moz-linear-gradient(top,#04060e,#363e4e);
    background: -ms-linear-gradient(top,#04060e,#363e4e);
    background: -o-linear-gradient(top,#04060e,#363e4e);


    .flow {
        width: 620px;
        height: 34px;
        line-height: 34px;
        margin: 44px auto 34px;
        border-radius: 30px;
        background: #f0f0f0;
        font-size: 0;
        white-space: nowrap;
        
        .step{
            display:inline-block;
            width:28%;
            height:100%;
            font-size: 14px;
            color: #ffffff;
            text-align:center;
            background:#eb413d;
            padding: 0 36px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            
            &:first-child{
                border-top-left-radius:50px;
                border-bottom-left-radius:50px;
            }
            
            &:last-child {
                border-top-right-radius:50px;
                border-bottom-right-radius:50px;
            }
            
            ~ .step {
                margin-left: -4%;
            }
            
            &::before {
                content: "";
                width: 6px;
                height: 6px;
                background-color: #ffffff;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 10px;
                transform: translateY(-50%);
            }
        }
        
        .step.active {
            border-top-right-radius:50px;
            border-bottom-right-radius:50px;
            box-shadow: 10px 0 16px 0 rgba(0, 0, 0, 0.12);
            
            ~ .step {
                background: transparent;
                color: #878787;
                
                &::before {
                    display: none;
                }
            }
        }
    }
    
    
    .title {
        width: 80px;
        height: 20px;
        margin: 0 auto 39px;
        font-size: 20px;
        line-height: 19px;
    }
    
    .kind {
        margin-bottom: 76px;
        width: 1000px;
        margin: 0 auto;

        .sample {
            display: block;
            width: 100%;
            height: 320px;
            background-color: #ffffff;
            box-shadow: 0 0 36px 0 #878787 inset;
            border-radius: 7px;
            position: relative;
            transition: all 300ms ease;
            
            &:hover{
                transform: scale(0.9,0.9);
                
            }
            
            img {
                max-width: 80%;
                max-height: 80%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
        
        .text_riding{
            display: inline-block;
            margin:19px 0 42px;
            transition:all 300ms ease;
            
            &:hover{
                color:#eb413d;
            }
        }

        .kind_top {
            width: 100%;
            text-align: center;

            .sample_top {
                width: 24.25%;
                margin-right: 1%;
                
                &:nth-child(4n) {
                    margin-right: 0;
                }
            }
        }
        
        .kind_bottom {
            width: 1000px;
            text-align: center;

            .sample_bottom {
                width: 32.66%;
                margin-right: 1%;
                
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }
    }
}
